<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="../../../plugins/layui/css/layui.css"/>
    <link rel="stylesheet" href="../../../css/normalize.css"/>
    <link rel="stylesheet" href="../../../css/fa.css"/>
    <link rel="stylesheet" href="../../../css/icon.css"/>
    <link rel="stylesheet" href="../../../css/ares_animate.min.css"/>
    <link rel="stylesheet" href="../../../css/ares_hover_variant.min.css"/>
    <link rel="stylesheet" href="../../../css/ares_reboot.css"/>
    <link rel="stylesheet" href="../../../css/app.min.css"/>
    <link rel="stylesheet" href="../../../css/iframe.css"/>
    <style>
        .layui-form-checkbox, .layui-form-checkbox > span {
            width: 100%;
        }
    </style>
</head>

<body>
<form class="ares-p layui-form" lay-filter="form">
    <div class="layui-form-item">
        <label id="problem-current-label" class="layui-hide">当前主要康复问题</label>
        <div id="problem-current-wrap" class="ares-row"></div>
        <label id="problem-short-label" class="layui-hide">短期目标</label>
        <div id="problem-short-wrap" class="ares-row"></div>
        <label id="problem-lang-label" class="layui-hide">长期目标</label>
        <div id="problem-lang-wrap" class="ares-row"></div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="submit">提交表单</button>
        </div>
    </div>
</form>


<script type="text/javascript" src="../../../plugins/layui/layui.js"></script>
<script type="text/javascript" src="../../../aresExtends/config/layuiConfig.js"></script>
<script>
    layui.use(['form', 'constants', 'qs', 'utils'], function (form, constants, qs, utils) {
        var queryParams = qs.parse(location.search.substr(1)),
            editAble = !!(queryParams.edit * 1),
            cacheData = utils.ARES.cache.trainingProgramProblem;

        init();

        /**
         * @author: ares
         * @date: 2021/3/9 9:52
         * @description: 提交表单
         */
        form.on('submit(submit)', function (data) {
            var fields = data.field;
            utils.ARES.event.emit('updateTrainingProgramProblem', fields);
            utils.layer.closeAll('iframe');
            return false;
        });

        /**
         * @author: ares
         * @date: 2021/3/10 12:14
         * @description: 渲染问题与目标
         * @param {string}type   current|short|lang
         */
        function renderProblem(type) {
            var $wrap = $('#problem-' + type + '-wrap'),
                $label = $('#problem-' + type + '-label'),
                list = constants.trainingProgramProblem[type],
                $fragment = $(document.createDocumentFragment());
            $.each(list, function (index, item) {
                var $checkboxWrap = $('<div class="ares-col-6" title="' + item + '">'
                    + '<input type="checkbox" name="' + type + '-' + index + '" title="' + item + '" value="' + item + '" lay-skin="primary">'
                    + '</div>');
                if (editAble && $.isPlainObject(cacheData) && cacheData[type + '-' + index] == item) {
                    $checkboxWrap.find('input').prop('checked', true);
                }
                $fragment.append($checkboxWrap);
            })

            var $other = $('<div class="ares-col-sm-6">'
                + '<label >备注 </label>'
                + '<input name="' + type + '-other" class="layui-input ares-d-inline-block ares-w-auto">'
                + '</div>');
            if (editAble && $.isPlainObject(cacheData) && cacheData[type + '-other']) {
                $other.find('input').val(cacheData[type + '-other']);
            }
            $fragment.append($other);
            $wrap.empty().append($fragment);
            $label.removeClass('layui-hide');
            form.render();
        }

        /**
         * @author: ares
         * @date: 2021/3/10 12:15
         * @description: 初始化
         */
        function init() {
            renderProblem('current');
            renderProblem('short');
            renderProblem('lang');
        }
    })
</script>
</body>

</html>
